<template>
  <div class="container">
    <div class="suite"  v-if="state">
      <ul v-if="module.remainMinute">
        <li><span>价格</span>{{module.salesPrice }}<span class="span2" v-if="module.salesPrice">元</span></li>
        <li><span>套餐时间</span>{{module.totalMinute }} 分钟</li>
        <li><span>超出套餐费</span>{{module.outPrice }}</li>
        <li><span>套餐余额</span>{{module.remainMinute  }} 分钟</li>
        <li><span>使用说明</span>{{module.instruction }}</li>
      </ul>
      <ul v-else >
        <li><span>价格</span>{{module.salesPrice }}<span class="span2" v-if="module.salesPrice">元</span></li>
        <li v-if="module.startPrice"><span>起步价</span>{{module.startPrice }}</li>
        <li><span>套餐内费用</span>{{module.inPrice }}</li>
        <li><span>超出套餐费</span>{{module.outPrice }}</li>
        <li><span>适用车型</span>{{module.carTypes }}</li>
        <li v-if="module.useTime"><span>使用时间</span>{{module.useTime }}</li>
        <!--<li><span>套餐余额</span>{{module.amountMoney }}<span class="span2" v-if="module.amountMoney">元</span></li>-->
        <li><span>使用说明</span>{{module.instruction }}</li>
      </ul>
    </div>
    <div v-else class="pageError">
        <p @click="retry()">获取套餐信息失败，稍后重试</p>
    </div>
  </div>
</template>

<script>
  var filters = {
    parseURL:function(url) {
      var a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          var ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }

  export default {
    data () {
      return {
        id:'',
        token:"",
        state:true,
        module:{}
      }
    },
    created () {

    },
    mounted(){
      const that = this;
      const url = window.location.href;
      this.id = filters.parseURL(url).params.id;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getActivityDetail();
      })
    },
    methods: {
      getActivityDetail(){
        this.$api.post('/product/v1/authApi/detail?productId='+this.id,{},s=>{
          this.module = s.module;
        },f=>{

        },{
          "token": this.token
        })
      },
      retry () {
        window.location.reload();
      }
    }
  }
</script>
<style scoped >
  @import "./styles/styles.css";
  ul>li{ font-size: 14px; padding: 0.24rem;  padding-left: 105px; border-bottom: 1px solid #eee; line-height: 0.5rem;}
  ul>li:last-child{ border-color: transparent;}
  ul>li>span{ font-weight: bold; width: 105px; margin-left: -105px; padding-left: 0.24rem; display: inline-block;}
  ul>li>span.span2{ font-weight: normal; display: inline; padding-left: 0; margin: 0; }
  .container{ height: 100%; background:#f8fafa url('styles/asset/bg.png') no-repeat bottom center; background-size: contain; }
  .suite{ padding: 0.34rem;  margin: 0 auto; max-width: 750px; height: 100%; overflow-y: scroll;}
  .pageError{
    text-align: center;
    line-height: 2em;
    padding: 8em 0;
    font-size: 14px;
  }
</style>
